import { Styles } from "../widgets/styles.slint";
import { LineEdit } from "../widgets/line-edit.slint";
import { Button } from "../widgets/button.slint";
import { SystemInfoBridge, InstanceBridge } from "../blocks/bridges.slint";
import { UiState } from "../blocks/globals.slint";

export component GetStartedPage inherits Rectangle {
    background: transparent;

    VerticalLayout {
        alignment: LayoutAlignment.center;
        spacing: Styles.sizes.s-xl;

        HorizontalLayout {
            alignment: LayoutAlignment.center;
            spacing: Styles.sizes.s-md;
            Image {
                source: @image-url("../assets/logo-stroked.svg");
                width: 64px;
                height: 64px;
            }

            title := VerticalLayout {
                alignment: LayoutAlignment.center;
                spacing: Styles.sizes.s-md;
                padding: Styles.sizes.p-md;

                property <string> cursor: "_";

                Timer {
                    interval: 0.5s;
                    running: true;
                    triggered() => {
                        if (title.cursor == "_") {
                            title.cursor = " ";
                        } else {
                            title.cursor = "_";
                        }
                    }
                }

                HorizontalLayout {
                    spacing: Styles.sizes.s-lg;

                    Text {
                        text: "WebSocket Reflector X";
                        font-size: Styles.sizes.font * 1.5;
                        font-weight: 700;
                        color: Styles.palette.window-fg;
                        vertical-alignment: center;
                        horizontal-stretch: 1;
                    }

                    if SystemInfoBridge.has-updates: Button {
                        horizontal-stretch: 0;
                        text: @tr("Update");
                        icon: @image-url("../assets/sparkle.svg");
                        icon-color: Styles.palette.warn-bg;

                        clicked => {
                            SystemInfoBridge.open-link("https://github.com/XDSEC/WebSocketReflectorX/releases");
                        }
                    }
                }

                Text {
                    text: "Controlled TCP-over-WebSocket forwarding tunnel" + title.cursor;
                    font-size: Styles.sizes.font;
                    font-weight: 400;
                    color: Styles.palette.window-fg;
                    opacity: 0.6;
                }
            }
        }

        Rectangle {
            height: Styles.sizes.h-md * 2;
        }

        HorizontalLayout {
            alignment: LayoutAlignment.center;

            VerticalLayout {
                spacing: Styles.sizes.s-lg;
                width: 480px;

                HorizontalLayout {
                    spacing: Styles.sizes.s-lg;

                    Button {
                        icon: @image-url("../assets/arrow-sync.svg");

                        icon-rotate-angle: 0deg;

                        clicked() => {
                            SystemInfoBridge.refresh-interfaces();
                            self.icon-rotate-angle = self.icon-rotate-angle + 180deg;
                        }
                    }

                    local-address-selector := Button {
                        horizontal-stretch: 1;
                        text: "127.0.0.1";
                        icon: @image-url("../assets/globe.svg");
                        alignment: start;

                        clicked() => {
                            network-interface-popup.show();
                        }

                        network-interface-popup := PopupWindow {
                            width: parent.width + Styles.sizes.p-md * 2;
                            height: min(SystemInfoBridge.interfaces.length * (Styles.sizes.h-md + Styles.sizes.s-md) - Styles.sizes.s-md + Styles.sizes.p-md * 2, 192px);
                            x: -Styles.sizes.p-md;
                            y: parent.height + Styles.sizes.s-md;

                            Rectangle {
                                background: Styles.palette.window-alter-bg;
                                width: parent.width;
                                height: parent.height;
                                border-color: Styles.palette.window-border;
                                border-width: 1px;
                                border-radius: Styles.sizes.r-lg;
                                clip: true;

                                Flickable {
                                    width: parent.width;
                                    height: parent.height;
                                    VerticalLayout {
                                        spacing: Styles.sizes.s-md;
                                        padding: Styles.sizes.p-md;
                                        for item in SystemInfoBridge.interfaces: Button {
                                            text: item;
                                            flat: true;
                                            alignment: start;
                                            icon: item == "127.0.0.1" ? @image-url("../assets/lock-closed.svg") : (item == "0.0.0.0" ? @image-url("../assets/warning.svg") : @image-url("../assets/network-adapter.svg"));

                                            clicked() => {
                                                if (item != "") {
                                                    local-address-selector.text = item;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    port-edit := LineEdit {
                        width: 80px;
                        placeholder-text: @tr("Port...");
                        text: "0";
                    }
                }

                HorizontalLayout {
                    spacing: Styles.sizes.s-lg;

                    remote-addr-edit := LineEdit {
                        horizontal-stretch: 1;
                        placeholder-text: "[ws|wss]://address...";
                    }

                    send-button := Button {
                        icon: @image-url("../assets/send.svg");

                        send-timer := Timer {
                            interval: Styles.durations.mid;
                            running: false;
                            triggered => {
                                UiState.change-scope("default-scope");
                                UiState.page = "default-scope";

                                send-timer.running = false;
                                send-button.icon-rotate-angle = 0deg;
                            }
                        }

                        clicked() => {
                            InstanceBridge.add(remote-addr-edit.text, local-address-selector.text + ":" + port-edit.text);

                            send-timer.running = true;
                            send-button.icon-rotate-angle = 90deg;
                        }
                    }
                }
            }
        }

        Rectangle {
            height: Styles.sizes.h-md;
        }
    }
}
